<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style type="text/css">
		#app{
			width: 500px;
			height: 500px;
			background-color: pink;
			margin:0 auto;
		}
		/* .app-ser{
			text-align: center;
		} */
		ul,li{
			list-style: none;
		}
		 ol {
		      display: flex;
		    }
		
		    ol li {
		      list-style: none;
		      width: 30px;
		      text-align: center;
		    }
		
		   .active {
		      background-color:red;
		      color: white;
		    }
	</style>
</head>
<body>
	<div id="app">
		<p class="app-ser">
			<input type="text" name="" id="" @keydown.enter="enterEvent" placeholder="请输入你的操作" v-model="inputValue" />
			<!-- <button type="button" @click="enterEvent">添加</button> -->
			<!-- <input type="text" name="" id="" value="" />
			<button type="button">搜索</button> -->
			<input type="text" v-model="txt" @keyup.enter="search">
			    <button @click="search">搜索</button>
			<h3>进行时 <span>{{num}}</span></h3>
			<ul>
				<li v-for="(item,index) in listdata" :key="item.id" v-if="item.flag===false">
					<input type="checkbox" name="" id="" @click="item.flag=true" value="" v-model="item.flag"/>{{item.inputValue}}
					<button type="button" @click="delEvent(item)">删除</button>
				</li>	
				
			</ul>
			<!-- 分页 -->
			 <!-- 分页 -->
			                <!-- <ol style="display: flex">
			                    <li :class="{active:n===pageno}" v-for="n in getpage"   @click="changepage(n)">{{n}}<>
			                </ol> -->
			                <!-- 分页结束 -->
			<ol>
			    <li v-for="n in getpage" @click="chagepage(n)" :class="{active:n===pagenum}">{{n}}</li>
			</ol>
			<hr >
			<h3>完成时 <span>{{num1}}</span></h3>
			<ul>
				<li v-for="(item,index) in listdata" :key="item.id" v-if="item.flag===true">
					<input type="checkbox" name="" @click="deldone" id="" value="" v-model="item.flag"/>{{item.inputValue}}
					<button type="button" @click="del(item)">删除</button>
				</li>
			</ul>
			<!-- <ol>
			        <li v-for="n in getpagedone" @click="chagepage(n)" >{{n}}</li>
			      </ol> -->
		</p>
		
	</div>
	
	<script type="text/javascript">
		
		
		let app = new Vue({
			el:"#app",
			data:{
				doingList:[],
				// finish:[],
				inputValue:"",
				txt:'',
				keyword:"",
				// 每一页能装的行数
				        pagesize: 5,
				        // 页码
				        pagenum: 1,
			},
			methods:{
				enterEvent(){
					this.doingList.push({
						inputValue:this.inputValue,
						flag:false,
						id:Date.now()
					});
					this.inputValue=""
				},
				delEvent(item){
					// console.log(this)
					let index = this.doingList.indexOf(item)
					this.doingList.splice(index,1)
				},
				del(item){
					let index = this.doingList.indexOf(item)
					this.doingList.splice(index,1)
				},
				deldone(){
				  this.doingList.push(this.inputValue);
				 
				},
				chagepage(n) {
				          this.pagenum = n;
				        },
				search() {
				          //重置页码
				          this.pagenum = 1;
				          this.keyword = this.txt;
				        },
			},
			
			computed:{
				num(){
				  let num2 = 0
				  this.doingList.forEach((item)=>{
				      if(item.flag===false){
				          num2 ++
				      };
				  
				  })
				  return num2
				},
				num1(){
				  let num3 = 0
				  this.doingList.forEach((item)=>{
				      if(item.flag===true){
				          num3 ++
				      }
				  })
				  return num3
				},
				getpage() {
					 let list = this.doingList.filter((item, index) => {
					            var reg = new RegExp(this.keyword, 'i')
					            return reg.test(item.inputValue);
					          });
				          return Math.ceil(list.length / this.pagesize)
				        },
				
				 listdata() {
					 let list = this.doingList.filter((item, index) => {
					   var reg = new RegExp(this.keyword, 'i')
					   return reg.test(item.inputValue);
					   // return item.positionName.indexOf(this.keyword) > -1;
					 })
				          let startIndex = (this.pagenum - 1) * this.pagesize;
				          let endIndex = startIndex + this.pagesize;
				          return list.slice(startIndex, endIndex)
				        }
				//         listdatadone() {
				//           let startIndex = (this.pagenum - 1) * this.pagesize;
				//           let endIndex = startIndex + this.pagesize;
				//           return this.finish.slice(startIndex, endIndex)
				//         }
			}
		})
	</script>
</body>
</html>